<!--  frame 经销商账户 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>经销商账户</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}


	.top_bg {
	  position: absolute;
	  width: 100%;
	  top: 0;
	  height: 2.90rem;
	  background: linear-gradient(0deg, rgba(253, 27, 66, 1) 0%, rgba(255, 80, 45, 1) 100%);
	}

	.account {
	  position: relative;
	  /* left: 60rem; */
	  /* top: 15rem; */
	  width: 6.30rem;
	  min-height: 3.20rem;
	  text-align: center;
	  background: #fff;
	  box-shadow: 0px 0px .30rem 0rem rgba(198, 198, 198, 0.4);
	  border-radius: .10rem;
	  padding-top: .40rem;
	  margin: 0 auto;
	  margin-top: .20rem;
	}

	.account_title {
	  height: .23rem;
	  line-height: .23rem;
	  font-size: .24rem;
	  color: #666;
	}
	.fs-24{
	  font-size: .24rem;
	}
	.balance {
	  height: .56rem;
	  line-height: .56rem;
	  margin-top: .15rem;
	  margin-bottom: .45rem;
	  font-size: .60rem;
	  color: #ff502d;
	}

	.btn1 {
	  width: 3.00rem;
	  height: .60rem;
	  line-height: .60rem;
	  font-size: .24rem;
	  color: #ff502d;
	  border: 1px solid #ff502d;
	  border-radius: .30rem;
	  margin: 0 auto;
	}

	.bg_c {
	  opacity: 0.6;
	}

	.income {
	  margin-top: .20rem;
	}
	.earning{
	  text-align:right ;
	}
	.yahuo{
	  text-align: left
	}
	.earning, .yahuo {
	  font-size: .24rem;
	  color: #999;
	  width: 45%;
	  margin: 0 .20rem;
	}

	.mr_r_30 {
	  margin-right: .30rem;
	}

	/* 记录 */

	.mr_t_40 {
	  margin-top: .40rem;
	}

	.mr_t_35 {
	  margin-top: .35rem;
	}

	.mr_t_20 {
	  margin-top: .20rem;
	}

	.mr_t_10 {
	  margin-top: .10rem;
	}

	.record {
	  padding-top: .40rem;
	}

	.nav {
	  display: flex;
	}

	.nav_item {
	  flex: 1;
	}

	.nav_text {
	  position: relative;
	  width: 1.20rem;
	  padding: .25rem 0;
	  font-size: .30rem;
	  color: #999;
	  margin: 0 auto;
	}

	.active {
	  color: #333;
	}

	.xiahuaxian {
	  position: absolute;
	  left: .22rem;
	  right: .22rem;
	  bottom: 0;
	  height: 2px;
	  background: #ff502d;
	  border-radius: .01rem;
	}

	/*隐藏滚动条*/

	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}

	.record_item {
	  height: 1.40rem;
	  display: flex;
	  padding: 0 .35rem;
	  background: #fff;
	  border-bottom: .01rem solid #eee;
	}

	.shop_title {
	  font-size: .30rem;
	  line-height: .30rem;
	  color: #666;
	}

	.order_num, .time {
	  height: .24rem;
	  line-height: .24rem;
	  font-size: .24rem;
	  color: #999;
	}

	.price {
	  font-size: .30rem;
	  line-height: .30rem;
	  color: #35c946;
	}

	.rec_r {
	  flex: auto;
	  text-align: right;
	}


	.down-arrow {
	    display :inline-block;
	    position: relative;
	    width: .30rem;
	    height: .20rem;
	    margin-right: .20rem;
	}

	.down-arrow::after {
	    display: inline-block;
	    content: " ";
	    height: .12rem;
	    width: .12rem;
	    border-width: 0 .02rem .02rem 0;
	    border-color: #999999;
	    border-style: solid;
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform-origin: center;
	    transition: transform .3s;
	    position: absolute;
	    top: 50%;
	    right: .10rem;
	    margin-top: -.10rem;
	}
	.down-arrow.active::after {
	    transform-origin: center;
	    transform: rotate(-135deg);
	    transition: transform .3s;
	}
	.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tx-inp{
	width: 100%;
	border: solid #F8F8F8 0px;
	border-bottom: solid #F8F8F8 1px;
	height: 0.9rem;
}
.tx-btn{
	display: flex;
	margin-top: 0.2rem;
}
.tx-btn1{
	height: 0.9rem;
	width: 50%;
	border: solid #F8F8F8 1px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	</style>
</head>
<body>
	<div class="content app" v-cloak>
经销商账户
<!--pages/agency/agency.wxml-->

<!-- 背景 -->
<div class="top_bg">

</div>
<!-- 账户 -->
<div class="account">
  <div class="account_title">我的账户余额</div>
  <div class="balance">¥{{datas.price||0}}</div>
  <div class="btn1" hover-class="bg_c" @click="tixian">提现</div>
  <div class="income flex-center">
    <div class="earning">累计收益 ¥{{datas.all_sale||0}}</div>
    <div class="yahuo">累计销售额 ¥{{datas.accumulated_income||0}}</div>
  </div>
  <div v-if="showMore">
  <!-- all_sales  总收益额(除去成本价)
      sales   最低销售额
      deposit  押金 -->
    <div class="fs-24 flex-center" v-for="(item,index) in datas.agentCity" :key="index" style="padding-top: .06rem;">
      <div class="earning">{{item.cityName}} ¥{{item.all_sales||0}}    </div>
      <div class="yahuo" style="padding-top: .06rem;">{{item.cityName}} ¥{{item.accumulated_income||0}}</div>
    </div>
  </div>
  <div @click="showAll">
    <div :class=" showMore?'active down-arrow':'down-arrow'"></div>
  </div>
</div>
<!-- 收入与提现记录 -->
<div class="record">
  <div class="nav">
    <div class="nav_item" @click="open_record(1)" >
      <div :class=" state==1?'active nav_text':'nav_text'">收入记录
        <div :class="state==1?'xiahuaxian':''"></div>
      </div>
    </div>
    <div class="nav_item" @click="open_record(0)" >
      <div :class=" state==0?'nav_text active':'nav_text'">提现记录
        <div :class="state==0?'xiahuaxian':''"></div>
      </div>
    </div>
  </div>
  <div class="record_item" hover-class="bg_c" v-for="(item,index) in lists" :key="index">
    <div class="rec_l mr_t_35">
      <div class="order_num mr_t_20">交易单号：{{item.id}}</div>
    </div>
    <div class="rec_r mr_t_40">
      <div class="price" v-if="state==1">+{{item.price}}</div>
      <div class="price" v-else style="color: #FF4545;">-{{item.price}}</div>
      <div class="time mr_t_10">{{item.create_time}}</div>
    </div>
  </div>
  <div v-if="dataLength!=size" style="color: #999;font-size: .24rem;text-align: center;padding: .40rem;">已全部加载</div>
</div>

<!-- 模态框 -->
<div class="hhModal demo">
  <div class="hhModalHeader">
    <p class="hhModalTitle">提现信息</p>
    <a class="hhModalClose icon"></a>
  </div>
  <div class="hhModalContent">
  	<input class="tx-inp" type="number"  placeholder="请输入卡号" v-model="bankNum">
		<input class="tx-inp" type="text"  placeholder="请输入开户人姓名" v-model="bankUserName">
		<input class="tx-inp" type="text"  placeholder="请输入开户行" v-model="bankName">
    <div class="tx-btn">
    	<div class="tx-btn1" @click="closegb">取消</div>
			<div class="tx-btn1" @click="submit">确定</div>
    </div>
  </div>
</div>


	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			num: 0,
	     height: "",
	     lists: [],
	     state: 1,
	     page: 1,
	     size: 10,
	     showMore: false,
	     dataLength:10,
			 datas:[],
			 bankNum:'',
			 bankUserName:'',
			 bankName:'',
		},
		mounted: function(){
			// 上拉加载
			api.addEventListener({
					name: 'scrolltobottom',
					extra: {
							threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
					}
			}, function(ret, err) {
						vm.getInfo();
			});
			this.getId();
		},
		methods: {
			getId: function (loader) {
					let param = {

					}
					AjaxSafe({
				   		url:"/xapp/agent/info",
				    	data:param,
				    	loader:loader,
						success: function(ret) {
							if (ret.state) {
									vm.agentId= ret.data.id,
									vm.datas= ret.data
									vm.getInfo();
									vm.getHeadInfo();
							}
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
			  },
				showAll: function () {
					this.showMore = !this.showMore
				},
				getHeadInfo: function (loader) {
					let param = {
							agent_id: this.agentId
					}
					AjaxSafe({
				   		url:"/xapp/agent/accountLogAll",
				    	data:param,
				    	loader:loader,
						success: function(ret) {
						    vm.datas = ret.data
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				 },
				 getInfo: function (loader) {
					 if(this.size<=this.dataLength){
						 let param = {
							  agent_id: this.agentId,
								state: this.state,
								page: this.page,
								size: this.size,
						}
						AjaxSafe({
					   		url:"/xapp/agent/accountLog",
					    	data:param,
					    	loader:loader,
							success: function(ret) {
								vm.lists= [...vm.lists,...ret.list]
								vm.page=vm.page+1
								vm.dataLength=ret.list.length
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					}else{
						return;
					}
				 },
				 //选择菜单
				 open_record: function (index) {
					 if (index != this.state) {
							 this.state= index,
							 this.page= 1,
							 this.lists=[],
							 this.dataLength=this.size
						 this.getInfo();
					 }
				 },
				 // 打开提现提示
				 tixian: function () {
					 if(this.datas.price == 0){
						 api.toast({msg: '账号余额不足！',duration: 2000,location: 'middle'});
						 return
					 }
					 hhPanel.modal({
					    elm: ".demo",
					    init: function(ret){
					        Console(ret);
					    },
					    success: function(ret){
					        $(ret.elm).find(".time").text(Date.now());
					    }
					});
				},
				// 提现
			  submit: function () {

			    if(!this.bankNum){
						api.toast({msg: '请输入卡号',duration: 2000,location: 'middle'});
			      return;
			    }
			    if(!this.bankUserName){
						api.toast({msg: '请输入开户人姓名',duration: 2000,location: 'middle'});
			      return;
			    }
			    if(!this.bankName){
						api.toast({msg: '请输入开户行',duration: 2000,location: 'middle'});
			      return;
			    }
			      let datas = {
			        bank_num:this.bankNum,//卡号
			        bank_user_name:this.bankUserName,//开户人姓名
			        bank_name:this.bankName,//开户行
			      }
						let me = this
			      // wx.setStorageSync('bankInfo',JSON.stringify(datas))
			      datas.price = this.datas.price;
						AjaxSafe({
					   		url:"/xapp/agent/withdrawal",
					    	data:datas,
					    	loader:true,
							success: function(res) {
								if (res.state) {
  								hhPanel.closeAll();
									vm.getHeadInfo();
						    }
						    api.toast({msg: res.msg,duration: 2000,location: 'middle'});
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
			  },
				// 关闭模态框
				closegb(){
					hhPanel.close();
				}



		},

	});
}

</script>
</html>
